<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title><?php echo $this->ViewData['Title']; ?></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="../Content/CSS/style.css" rel="stylesheet" type="text/css" />
    <link href="../Content/CSS/migi-offer-request.css" rel="stylesheet" type="text/css" />
    <link href="../Content/CSS/screen.css" rel="stylesheet" type="text/css" />
    <link href="../Content/CSS/migiv2.css" rel="stylesheet" type="text/css" />  
    <link href="../Content/CSS/jquery.jqplot.css" rel="stylesheet" type="text/css" />  
    <link href="../Content/CSS/localsearch+vi.css" rel="stylesheet" type="text/css" />  
    
    <link href="../Content/CSS/facebook.alert.css" rel="stylesheet" type="text/css">
    
    <script src="../Script/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../Script/jqplot.canvasAxisTickRenderer.min.js" type="text/javascript"></script>
    <script src="../Script/jqplot.canvasTextRenderer.min.js" type="text/javascript"></script>
    <script src="../Script/jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>
    <script src="../Script/jquery.jqplot.min.js" type="text/javascript"></script>
    <script type='text/javascript'>$('#graphHolder').data('migi',[{"Key":"8/2011","Value":4},{"Key":"9/2011","Value":0},{"Key":"10/2011","Value":0},{"Key":"11/2011","Value":0},{"Key":"12/2011","Value":0},{"Key":"1/2012","Value":0},{"Key":"2/2012","Value":0},{"Key":"3/2012","Value":0},{"Key":"4/2012","Value":0},{"Key":"5/2012","Value":0},{"Key":"6/2012","Value":0},{"Key":"7/2012","Value":0},{"Key":"8/2011","Value":2},{"Key":"9/2011","Value":0},{"Key":"10/2011","Value":0},{"Key":"11/2011","Value":0},{"Key":"12/2011","Value":0},{"Key":"1/2012","Value":0},{"Key":"2/2012","Value":0},{"Key":"3/2012","Value":0},{"Key":"4/2012","Value":0},{"Key":"5/2012","Value":0},{"Key":"6/2012","Value":0},{"Key":"7/2012","Value":0}])</script>                     
<script type="text/javascript">
    $(document).ready(function () {
        var d1 = [],
            d11 = [],
            d2 = [],
            i = 0,
            previousPoint = null,
            briefInfo = {},
            icon = {
				 image: '../Content/Image/Migi1/marker.png'
			    },            
            pinpoint = {
                latitude: 	21.027976,
                longitude: 105.853633,
                icon: icon
            };      
        briefInfo = $("#graphHolder").data("migi");
        for (i = 0; i < 12; i++)
        {
            d1.push(briefInfo[i]["Value"]);            
            d11.push(briefInfo[i+12]["Value"]);
            d2.push(briefInfo[i]["Key"]);
        }
        $.jqplot.config.enablePlugins = true; // on the page before plot creation. 
        $.jqplot('graphHolder', [d1,d11], {
        stackSeries: true,
        legend: {show: true, location: 'nw'},
        title:'Request, Offer theo từng tháng',
        axes:
	    {
		    xaxis:{
			    ticks: d2, 
			    renderer:$.jqplot.CategoryAxisRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
                tickOptions: {
                    angle: -30,
                    fontSize: '10pt',
		            fontFamily:'Tahoma', 
                },
			    autoscale:true
			    },
            yaxis: {
                min: -5, 
                label:'Số lượng',
            }
	    },
        seriesDefaults:[{
                lineWidth: 2,
                markerOptions:{style:'filledCircle'},                
                }],
        series:[
            {label:'Request'}, 
            {label:'Offer'}           
        ],
	    highlighter: {show: false},
        cursor: {show: false}
    });   
               
       $('#map_canvas').googleMaps({
	    controls: {
			localSearch: true
		}
        }); 
  
        emapHandler = function($selector, selector, container, template){				
		    //var that = $(container),
		    var i = $(selector).index($selector),
			    tmp = $(container).data("migi"),
			    html = "";
            if(typeof(tmp) === "object")
		        tmp = tmp[i];
            pinpoint.latitude = tmp["Marker"]["Latitude"];
            pinpoint.longitude = tmp["Marker"]["Longitude"];
            if(pinpoint.latitude === 0 && pinpoint.longitude === 0)
            {
                $.googleMaps.geoCode({
                    address: tmp["Location"],
                    depth: 16
                });
            }
            else
            {		    		   
		        $.googleMaps.panTo(pinpoint);
                if(!$($selector).data("done")){
                    $($selector).data("done",true)
                    $.googleMaps.mapMarkers({},pinpoint);                
                }
            }		    
            html = $.migi.tmpl(template, tmp);
            $("#map-info ul").html(html);
	    };   
        $("#offerRibbon li.item a img").each(function(){
                $(this).bind("mouseenter",function(){ 				
				emapHandler(this,'#offerRibbon li.item a img', '#offerRibbon', "mapInfoTmpl");});
		});	
        $("#horizontalPrev").click(function(){
            $("#offerRibbon").stop().animate({
                    marginLeft: "0px"
                },500);
        });	
        $("#horizontalNext").click(function(){
            $("#offerRibbon").stop().animate({
                    marginLeft: "-876px"
                },500);
        });  
        $('div.pagination span').click(function () {
            $('#filterBlock').slideToggle('medium');
        });
    
        //Default Action
	    $(".tab_content").hide(); //Hide all content
	    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
	    $(".tab_content:first").show(); //Show first tab content
	
	    //On Click Event
	    $("ul.tabs li").click(function() {
		    $("ul.tabs li").removeClass("active"); //Remove any "active" class
		    $(this).addClass("active"); //Add "active" class to selected tab
		    $(".tab_content").hide(); //Hide all tab content
		    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		    $(activeTab).fadeIn(); //Fade in the active content
		    return false;
	    });          
}); 
</script>   
    <script src="../Script/common.js" type="text/javascript"></script>
    <script src="../Script/jquery.js" type="text/javascript"></script>
  
    <script src="../Script/jquery.validate.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            var index = $("#active").val();
            $("#menu li:nth-child(" + index + ")").attr("class", "active");
            var isMenuShowing = false;
            var menuPosition = null;
            var w;
            var h;
            $("#aMenu").click(function () {
                var position = $(this).position();
                w = $("#AccountMenu").width();
                h = $("#AccountMenu").height();
                $("#AccountMenu").css("left", 1005); ;
                $("#AccountMenu").css("top", position.top + 28);
                $("#AccountMenu").css("display", "block");
                menuPosition = $("#AccountMenu").position();
                isMenuShowing = true;
            });
            $(this).click(function (e) {
                if ((menuPosition != null) && (isMenuShowing == true) && ((e.pageX < menuPosition.left) || (e.pageX > menuPosition.left + w) || (e.pageY < menuPosition.top - 30) || (e.pageY > menuPosition.top + h))) {
                    $("#AccountMenu").css("display", "none");
                    isMenuShowing = false;
                }
            });
        })
    </script>
    
    <script src="../../Script/TheMiGi/migi.js" type="text/javascript"></script>
    <script src="../../Script/jquery.form.js" type="text/javascript"></script>
    <script src="../../Script/TheMiGi/GoogleMiGi.js" type="text/javascript"></script>
    <script src="../../Script/TheMiGi/Location.js" type="text/javascript"></script>
    <script src="../../Script/TheMiGi/Request.js" type="text/javascript"></script>   
    <style type="text/css"> 

</style>
</head>
<body id="body" onload="noBack();" onpageshow="if(event.persisted) noBack();" onunload="">
    <div class="main">
        <div class="main-content">       
            <div class="header" style="background-color: blue"></div>
            <!--begin menu -->
            <div style="float: left;">
                <div class="header-menu">
                    <div id="menu_wrapper" class="grey">
                        <div style="width: 745px; float: left; background-color: #EEEEEE;">
                            <ul id="menu">
                                <li><a href="/Home">Home</a></li>
                                <li><a href="/Offer/ListOffer">Offer</a></li>
                                <li><a href="/Want/ListWant">Want</a></li>
                                <li><a href="/Exchange/ListExchange">Exchange</a></li>
                                <li><a href="/Profile/viewInForm">Personal</a></li>                                      
                            </ul>
                        </div>
                        <div style="width: 215px; height: 40px; float: right; background-color: #EEEEEE;">
                        <?php if(isset($_SESSION['user_id'])){ ?>
                        
                            <ul id="account-menu">
                                <li id="aMenu" style="float:right;margin-right: -10px;"><a style=" cursor:pointer;">Account</a></li>
                            
                                <li id="aMenu" style="margin-top: -40px;float:right;margin-right: -90px;"><a href="/account/logout">LogOut</a></li>
                            </ul>
                        
                        <?php } else { ?>
                        
                            <ul id="account-menu">
                                <li id="aMenu" style="float:right;margin-right: -10px;"><a href="/account/login">Login</a></li>
                                <li id="aMenu" style="margin-top: -40px;float:right;margin-right: -90px;"><a href="/account/register">Register</a></li>
                            </ul>
                        
                        <?php }?>
                        </div>
                    </div>
                </div>
            </div>
            <!--end menu -->
            <?php include($this->ViewPath)?>                   
        </div>
    </div>
</body>
</html>
